<template>
  <view>
    <CustmNavBar
      :title="t('Lang_OrderDetail')"
      :bc="bg"
      :color="'#fff'"
      :dark="true"
      :isBack="true"
    >
      <template #right>
        <uv-icon name="kefu-ermai" size="22" color="#bdbebf"></uv-icon>
      </template>
    </CustmNavBar>
    <!-- 订单信息 -->
    <view class="orderInfo box">
      <view class="order-head head">
        <view class="order-num">
          {{ t("Lang_Order.Number") }}:{{ orderDetail.orderNo }}
        </view>
        <view class="order-status"> {{ t("Credit") }}(A) </view>
      </view>
      <view class="order-time">
        <view class="order-time-item">
          {{ t("Lang_Order.Time") }}:
          <text class="time">
            {{ orderDetail.createTime }}
          </text>
        </view>
        <view class="order-time-item">
          {{ t("Lang_Approved.Time") }}:
          <text class="time">
            {{ orderDetail.updateTime }}
          </text>
        </view>
        <view class="order-time-item">
          {{ t("Lang_Shopping.Time") }}:<text class="time"
            >2025.10.24 15:25</text
          >
        </view>
      </view>
    </view>
    <!-- 收货人信息 -->
    <view class="addressInfo box">
      <view class="head">
        {{ t("Lang_Recipient.Information") }}
      </view>
      <view class="info">
        <view class="address_img">
          <image class="img" src="/static/log.png" mode="aspectFit"></image>
        </view>
        <view class="address_info_detail">
          <view class="postCode"> Jeddah HK234 </view>
          <view class="address_info_item">
            {{ t("Lang_Consignee") }}: {{ address?.receiverName }}
          </view>
          <view class="address_info_item">
            {{ t("Lang_Phone") }}:{{ address?.receiverPhone }}
          </view>
          <view class="address_info_item">
            {{ t("Lang_Address") }}：{{ address?.receiverProvince
            }}{{ address?.receiverCity }}{{ address?.receiverRegion
            }}{{ address?.receiverDetailAddress }}
          </view>
        </view>
      </view>
    </view>
    <!-- 付款信息 -->
    <view class="paymentInfoBox box">
      <view class="paymentInfo">
        <view class="title"> {{ t("Lang_PaymentInfo") }}: </view>
        <view class="nt">
          {{ t("Lang_TotalAmount") }}:10,000.00 {{ t("Lang_SR")
          }}{{ t("Lang_Paid") }}: 8,000.00{{ t("Lang_SR") }} ,
          {{ t("Lang_Unpaid") }}: 2,000.00 {{ t("Lang_SR") }}.
        </view>
      </view>
      <view class="list">
        <view
          class="item"
          v-for="(item, i) in orderDetail.orderPaymentRecordsList"
          :key="i"
        >
          <view class="title">#{{ i + 1 }}{{ t("Lang_Payable.Amount ") }}</view>
          <view class="content"> </view>
        </view>
      </view>
    </view>
    <!-- 产品信息 -->
    <view class="productionInfo"></view>
    <!-- 退款信息 -->
    <view class="returnInfo"></view>
  </view>
</template>

<script setup>
import CustmNavBar from "@/components/CustomNavBar/index.vue";
import { onMounted } from "vue";
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import { OrderAPI } from "@/api";

const { t } = useI18n();
// setbar 背景色
const bg = ref("#127B56");

onMounted(() => {
  queryOrderDetail();
});

// 获取订单详情
const orderDetail = ref();
const address = ref(); // 收货人信息
const queryOrderDetail = async () => {
  let res = await OrderAPI.getOrderDetails(uni.getStorageSync("detail-id"));
  orderDetail.value = res.data;
  address.value = res.data.orderReceiverAddress;
};
// 获取当前订单的退款信息
const getOrderRefundInfo = () => {};
</script>

<style lang="scss" scoped>
@import "./orderInfo.scss";
</style>
